<template>
	<el-dialog
		:title="title"
		:visible.sync="addPropertyShow"
		width="50%"
		:before-close="cancel"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form ref="form" :model="form" label-width="120px" :rules="rules" label-position="left">
			<el-form-item label="基金类型" prop="raiseType">
				<el-select v-model="form.raiseType" placeholder="请选择" clearable filterable style="width: 100%" @change="fundTypeChange">
					<el-option :label="`${item.fieldName}基金`" :value="item.raiseType" v-for="item in allData" :key="item.raiseType"></el-option>
				</el-select>
			</el-form-item>
			<template v-if="title.includes('步骤')">
				<el-form-item label="步骤名称" prop="fieldName">
					<el-input v-model.trim="form.fieldName" clearable> </el-input>
				</el-form-item>
				<el-form-item label="步骤属性" prop="fieldCode">
					<el-input v-model.trim="form.fieldCode" clearable> </el-input>
				</el-form-item>
			</template>

			<el-form-item label="是否可见" prop="isVisible">
				<el-radio-group v-model="form.isVisible">
					<el-radio label="0">是</el-radio>
					<el-radio label="1">否</el-radio>
				</el-radio-group>
			</el-form-item>

			<template v-if="title.includes('字段')">
				<el-form-item label="上级节点" prop="parentId">
					<el-cascader
						style="width: 100%"
						:disabled="!form.raiseType"
						v-model="form.parentId"
						:options="stepData.childNodeList"
						clearable
						filterable
						:props="{ children: 'childNodeList', label: 'fieldName', value: 'fieldId', checkStrictly: true }"
					></el-cascader>
				</el-form-item>
				<el-form-item label="字段名称" prop="fieldName">
					<el-input v-model.trim="form.fieldName" clearable> </el-input>
				</el-form-item>
				<el-form-item label="字段属性" prop="fieldCode">
					<el-input v-model.trim="form.fieldCode" clearable> </el-input>
				</el-form-item>
				<!-- <el-form-item label="字段数据类型" prop="fieldType">
					<el-select v-model="form.fieldType" placeholder="请选择" clearable filterable style="width: 100%">
						<el-option label="公募基金" value="1"></el-option>
						<el-option label="专户产品" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否必填" prop="isRequired">
					<el-radio-group v-model="form.isRequired">
						<el-radio label="0">是</el-radio>
						<el-radio label="1">否</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item label="提示配置">
					<el-input v-model.trim="form.describe" clearable type="textarea"> </el-input>
				</el-form-item>
			</template>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="cancel" size="small">取 消</el-button>
			<el-button type="primary" @click="addConfirm('form')" size="small" :loading="loading" :disabled="loading">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import { propertyAdd, propertyEdit } from '@/api/productApi/fieldManagement'
export default {
	name: 'AddProperty',
	props: {
		title: {
			type: String,
			default: ''
		},
		addPropertyShow: {
			type: Boolean,
			default: false
		},
		getTotalDataLoading: {
			type: Boolean,
			default: false
		},
		addPropertyFunc: {
			type: Function,
			default: Function
		},
		allData: {
			type: Array,
			default: Array
		},
		getData: {
			type: Function,
			default: Function
		}
	},

	data() {
		return {
			form: {
				raiseType: '',
				fieldName: '',
				fieldCode: '',
				describe: '',
				parentId: [],
				fieldType: '',
				isRequired: ''
			},
			loading: false,
			rules: {
				raiseType: [{ required: true, message: '请选择基金类型', trigger: 'change' }],
				parentId: [{ required: true, message: '请选择上级节点', trigger: 'change' }],
				fieldName: [{ required: true, message: '请填写节点名称', trigger: 'blur' }],
				fieldCode: [{ required: true, message: '请填写节点属性', trigger: 'blur' }],
				fieldType: [{ required: true, message: '请选择字段数据类型', trigger: 'change' }],
				isRequired: [{ required: true, message: '请确认是否必填', trigger: 'change' }],
				isVisible: [{ required: true, message: '请确认是否可见', trigger: 'change' }]
			},
			stepData: {}
		}
	},

	mounted() {},

	methods: {
		fundTypeChange(val, num) {
			if (val) {
				this.stepData = this.allData.find(item => item.raiseType === val)
			} else {
				this.stepData = {}
			}
			if (!num) {
				this.form.parentId = []
			}
		},

		// 重置
		cancel() {
			this.$emit('addPropertyFunc')
			this.form = {
				raiseType: '',
				fieldName: '',
				fieldCode: '',
				describe: '',
				parentId: [],
				fieldType: '',
				isRequired: ''
			}
			this.resetForm('form')
		},

		// 编辑数据回显
		edit(obj) {
			this.form = JSON.parse(JSON.stringify(obj))
			this.$nextTick(() => {
				this.fundTypeChange(this.form.raiseType, 1)
				const num = this.title.includes('编辑') ? 2 : 1
				this.$set(this.form, 'parentId', this.form.cascaderIdList.splice(1, this.form.cascaderIdList.length - num))
			})
		},

		// 新增或编辑
		addConfirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.loading = true
					const form = { ...this.form }
					if (this.title.includes('字段')) {
						form.parentId = this.form.parentId[this.form.parentId.length - 1]
					}
					if (this.title.includes('步骤')) {
						form.parentId = this.stepData.fieldId
					}
					if (this.title.includes('新增')) {
						if (this.title === '新增步骤') {
							form.stepNum = this.stepData.childNodeList.length + 1
						}
						propertyAdd(form)
							.then(res => {
								if (res.msgCode === 'Y') {
									this.$message({ type: 'success', message: res.msg })
									this.cancel()
									this.$emit('getData')
								}
							})
							.finally(() => {
								this.loading = false
							})
					} else if (this.title.includes('编辑')) {
						propertyEdit(form)
							.then(res => {
								if (res.msgCode === 'Y') {
									this.$message({ type: 'success', message: res.msg })
									this.cancel()
									this.$emit('getData')
								}
							})
							.finally(() => {
								this.loading = false
							})
					}
				}
			})
		},

		resetForm(formName) {
			this.$refs[formName].resetFields()
		}
	}
}
</script>
<style lang="scss" scoped ></style>
